<style>
    .form-group label{
        font-weight: bold;
        display: inline;
        color: #f56954;
    }
</style>
<?php

function getSubCatlog($catalogId, $space, $listcatalog) {
    //print_r($listcatalog);die;
    // if ($parent != null) {
    $space.="--";
    foreach ($listcatalog as $key => $listdata) {

        if ($listdata["catalogParent"] == $catalogId) {
            echo '<option value="' . $listdata["catalogId"] . '">' . $space . $listdata["catalogName"] . '</option>';
            getSubCatlog($listdata["catalogId"], $space, $listcatalog);
        }
    }
    // }
}
?>
<script language="javascript" src="<?php echo WEB_PATH_HEADER; ?>/ckeditor/ckeditor.js" type="text/javascript"></script>
<script language="javascript" src="<?php echo WEB_PATH_HEADER; ?>/adminfile/jquery.MultiFile.js" type="text/javascript"></script>
<aside class="right-side">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Thêm mới sản phẩm

        </h1>
        <ol class="breadcrumb">
            <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> Quản lí</a></li>
            <li><a href="javascript:void(0);">Admin</a></li>
            <li class="active"> Thêm mới sản phẩm</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-8" id="contentaction">


                <div class="box box-info">
                    <div class="box-header" style="background:#0073b7;color:#FFF;">
                        <h3 class="box-title"><i class="fa fa-bars"></i> Vui lòng nhập đầy đủ thông tinh bên dưới</h3>
                        <a id="showprecess" style="float: right;padding:10px;color:#FFF;display: none;" onclick="showprecess();" href="javascript:void(0);" title="Xóa trắng tiến trình."><i class="fa fa-external-link"></i></a>
                    </div>
                    <form action="" method="POST" enctype="multipart/form-data" onsubmit="return AIM.submit(this, {'onStart': startCallback, 'onComplete': completeCallback})">
                        <div class="box-body">
                            <div class="bootstrap-timepicker">
                                <div class="form-group">
                                    <label>Tên sản phẩm:</label>
                                    <div class="input-group">
                                        <input onkeyup="geturlvideos();"  name="productname" id="productname" type="text" class="form-control timepicker" placeholder="Hãy nhập tên sản phẩm"/>
                                        <div class="input-group-addon">

                                        </div>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                                <div class="form-group">
                                    <label>Link sản phẩm:</label>
                                    <div class="input-group">
                                        <input id="linkproduct" type="text" disabled="true" class="form-control timepicker"/>
                                        <div class="input-group-addon">
                                            <i class="fa fa-link"></i>
                                        </div>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->

                                <div class="form-group">
                                    <label>Mô tả sản phẩm:</label>
                                    <div class="input-group">
                                        <textarea style="width:100%;float:left;resize: none" name="desproduct" id="desproduct" placeholder="Chưa có mô tả cho sản phẩm này"></textarea>
                                        <div class="input-group-addon">

                                        </div>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                                <div class="form-group" style="color: #f56954;">
                                    Giá sản phẩm :<input id="price" name="price" type="text" class="form-control" style="width: 150px;display: inline;" value="0"/>
                                    Số lượng :<input id="quanlity" name="quanlity" type="text" class="form-control" style="width: 50px;display: inline;" value="5"/>
                                    Xuất xứ :<input id="xuatxu" name="xuatxu" type="text" class="form-control" style="width: 100px;display: inline;" value="Chính hãng"/>
                                    Bảo hành :<input id="baohanh" name="baohanh" type="text" class="form-control" style="width: 100px;display: inline;" value="12"/>

                                </div><!-- /.form group -->
                                <div class="form-group">
                                    <label>Chuyên mục sản phẩm:</label>
                                    <div class="input-group">
                                        <select name="catalog" class="form-control">
                                            <?php
                                            $space = "";
                                            foreach ($listcatalog as $key => $listdata) {
                                                //echo $listdata["catalogParent"];
                                                if ($listdata["catalogParent"] == 0) {
                                                    //echo $listdata["catalogName"] . "-->";
                                                    echo '<option value="' . $listdata["catalogId"] . '">' . $space . $listdata["catalogName"] . '</option>';
                                                    // if ($listdata["catalogParent"] != null) {
                                                    getSubCatlog($listdata["catalogId"], $space, $listcatalog);
                                                    // }
                                                }
                                                echo "<br/>";
                                            }
                                            ?>
                                        </select>
                                        <div class="input-group-addon">
                                            <i class="fa fa-bars"></i>
                                        </div>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                                <div class="form-group">
                                    <label>Hình ảnh:</label>
                                    <div class="input-group">
                                        <input type="file" name="image[]" class="multi" maxlength="5"  accept="gif|jpg|png"/>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                                <div class="form-group">
                                    <label>Thông số kĩ thuật:</label>
                                    <div class="input-group">
                                        <textarea style="width:100%;float:left;resize: none"  name="content" id="content"></textarea>
                                        <script type='text/javascript'>CKEDITOR.replace('content');</script>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                                <div class="form-group">
                                    <label></label>
                                    <div class="input-group">
                                        <button id="btnsubmit" name="btn" value="btn" class="btn btn-success btn-flat"><i class="fa fa-download"></i> Thêm mới sản phẩm</button>
                                    </div><!-- /.input group -->
                                </div><!-- /.form group -->
                            </div>
                        </div><!-- /.box-body -->
                    </form>
                </div><!-- /.box -->
                <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/videos/geturlvideos" id="urlgeturl"/>
                <script>
                    function geturlvideos() {
                        var url = $("#urlgeturl").val();
                        var title = $("#titlevideos").val();
                        $.ajax({
                            url: url,
                            type: "POST",
                            cache: false,
                            data: "titlevideos=" + title,
                            success: function(dataserver) {
                                $("#linkvideos").val(dataserver + ".html");

                            }
                        });
                    }

                    function startCallback() {
                        // viết code khi click nút upload và bắt đầu upload.
                        var productname = $("#productname").val();
                        if (productname == "") {
                            $("#productname").focus();
                            $("#prochanges").append("<br/> - Hãy nhập tên sản phẩm - <i style='color:#F56954;'>Lỗi</i>");
                            return false;
                        }
                        var price = $("#price").val();
                        if (price == "" || parseInt(price) < 1) {
                            $("#price").focus();
                            $("#price").append("<br/> - Hãy nhập giá cho sản phẩm - <i style='color:#F56954;'>Lỗi</i>");
                            return false;
                        }
                        
                        $("#prochanges").append("<br/> - Đang xử lí... - <i style='color:#00A65A;'>Đang thực hiện</i>");
                        $("#progressaction").show(200);
                        return true;
                    }

                    function completeCallback(response) {
                        var data = response.split("*duypc*");
                        if (data[0] == "err") {
                            $("#prochanges").append(data[1]);
                        } else {
                            $("#prochanges").append("<br/> - Tiến trình xử lí - <i style='color:#00A65A;'>Xong</i>");
                            $("#prochanges").append("<br/> - <i style='color:#00A65A;'>Thêm sản phẩm thành công.</i>");
                        }
                        $("#progressaction").hide(200);

                    }
                </script>
            </div><!-- /.col (left) -->
            <div class="col-md-4" id="rightprecess">

                <!-- iCheck -->
                <div class="box box-danger">
                    <div class="box-header">
                        <h3 class="box-title">Tiến trình xử lí</h3>
                        <a style="float: right;padding:10px;" onclick="delprecess();" href="javascript:void(0);" title="Tắt tiến trình."><i class="fa fa-times"></i></a>
                        <a style="float: right;padding:10px;" onclick="clearprecess();" href="javascript:void(0);" title="Xóa trắng tiến trình."><i class="fa fa-trash-o"></i></a>

                    </div>

                    <div class="box-footer" id="prochanges">
                        - Hãy nhập thông tin.
                    </div>
                </div><!-- /.box -->
                <div style="display: none;" id="progressaction" class="progress sm progress-striped active">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only">20% Complete</span>
                    </div>
                </div>
            </div><!-- /.col (right) -->
        </div><!-- /.row -->

    </section><!-- /.content -->
</aside><!-- /.right-side -->